﻿<!--
	作者：大火兔 1979788761@qq.com
	时间：2015-11-24
-->
<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="renderer" content="webkit">
		<title>拼图响应式后台管理-后台管理</title>
		<!--
        	作者：大火兔 1979788761@qq.com
        	时间：2015-11-17
        	描述：使用官网CSS/JS同步最新版
        -->
		<link rel="stylesheet" href="http://www.pintuer.com/css/pintuer.css">
		<link rel="stylesheet" href="css/admin.css">
		<link type="image/x-icon" href="http://www.pintuer.com/favicon.ico" rel="shortcut icon" />
		<link href="http://www.pintuer.com/favicon.ico" rel="bookmark icon" />
	</head>

	<body>
		<!--顶部-->
		<div class="layout bg-main bg-inverse fixed" style="z-index: 9;">
			<div class="container-layout">
				<div class="navbar">
					<!--
                    	作者：1979788761@qq.com
                    	时间：2015-11-18
                    	描述：LOGO及系统名称
                    -->
					<div class="navbar-head">
						<button class="button icon-navicon" data-target="#navbar1">
						</button>
						<a href="/">
							<img src="http://www.pintuer.com/images/30-white.png" />
							<strong class="text-big">拼图响应式后台</strong></a>
					</div>
					<!--
                    	作者：1979788761@qq.com
                    	时间：2015-11-18
                    	描述：导航
                    -->
					<div class="navbar-body nav-navicon" id="navbar1">
						<ul class="nav nav-inline nav-menu">
							<li><a class="icon-cog" href="#">设置<span class="arrow"></span></a>
								<ul class="drop-menu">
									<li><a href="system.html">全局设置</a></li>
									<li><a href="system.html">系统设置</a></li>
									<li><a href="system.html">会员设置</a></li>
									<li><a href="system.html">积分设置</a></li>
									<li><a href="system.html">权限设置</a></li>
									<li><a href="system.html">插件设置</a></li>
									<li><a href="javascript:;">皮肤设置<span class="arrow"></span></a>
										<ul>
											<li><a href="#">墨绿</a></li>
											<li><a href="#">天蓝</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a class="icon-home" href="index.html">导航<span class="arrow"></span></a>
								<ul class="drop-menu">
									<li><a class="icon-th-list" href="#">栏目</a></li>
									<li><a class="icon-file-text" href="content.html">内容<span class="arrow"></span></a>
										<ul>
											<li><a href="content.html">新闻</a></li>
											<li><a href="#">留言</a></li>
											<li><a href="#">反馈</a></li>
										</ul>
									</li>
									<li><a class="icon-user" href="#">会员</a></li>
									<li><a class="icon-shopping-cart" href="#">订单</a></li>
								</ul>
							</li>
						</ul>
						<!--
                        	作者：1979788761@qq.com
                        	时间：2015-11-18
                        	描述：右侧用户资料
                        -->
						<ul class="nav nav-inline nav-menu navbar-right">
							<li>
								<a class="bg-main" href="javascript:;">
									<spn><img src="http://www.pintuer.com/demo/pintuer2/images/face.jpg" width="28" class="radius-circle"></spn>
									管理员
									<span class="downward"></span>
								</a>
								<ul class="drop-menu">
									<li><a class="icon-user" target="_blank" href="javascript:;">修改资料</a></li>
									<li><a class="icon-key" target="_blank" href="javascript:;">修改密码</a></li>
								</ul>
							</li>
							<li><a class="bg-green" href="javascript:;"><span class="icon-envelope"></span>&nbsp;<span class="badge bg-blue">5+</span><span class="downward"></span></a>
								<ul class="drop-menu">
									<li><a class="text-yellow-light" target="_blank" href="javascript:;"><span class="icon-envelope"></span>您有16封邮件</a></li>
									<li><a class="bg-gray" target="_blank" href="javascript:;"><span class="icon-envelope"></span>查阅更多...</a></li>
								</ul>
							</li>
							<li><a class="bg-blue" href="javascript:;"><span class="icon-bell-o"></span>&nbsp;<span class="badge bg-green">99+</span><span class="downward"></span></a>
								<ul class="drop-menu">
									<li><a class="text-yellow-light active" target="_blank" href="javascript:;"><span class="icon-comment"></span>您有26条未读消息</a></li>
									<li><a class="text-yellow-light active" target="_blank" href="javascript:;"><span class="icon-comments"></span>您有13条回复消息</a></li>
									<li><a class="bg-gray" target="_blank" href="javascript:;"><span class="icon-envelope"></span>查看更多...</a></li>
								</ul>
							</li>
							<li><a class="bg-yellow" target="_blank" href="login.html"><span class="icon-sign-out"></span>注销</a></li>
						</ul>
						<!--
                        	作者：1979788761@qq.com
                        	时间：2015-11-18
                        	描述：左侧搜索
                        -->
						<div class="navbar-form navbar-left">
							<form>
								<input type="text" class="input input-auto" name="keywords" size="15" placeholder="功能名称">
								<input type="submit" name="search" value="搜索" class="button bg">
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--内容-->
		<div class="layout">
			<ul class="bread bg">
				<li><a href="#" class="icon-home">首页</a> </li>
				<li><a href="#">系统中心</a></li>
			</ul>
			<div class="admin">
				<div class="line-big">
					<div class="xm3">
						<div class="panel border-back">
							<div class="panel-body text-center">
								<img src="images/face.jpg" width="120" class="radius-circle">
								<br> admin
							</div>
							<div class="panel-foot bg-back border-back">您好，admin，这是您第100次登录，上次登录为2014-10-1。</div>
						</div>
						<br>
						<div class="panel">
							<div class="panel-head"><strong>站点统计</strong></div>
							<ul class="list-group">
								<li><span class="float-right badge bg-red">88</span><span class="icon-user"></span> 会员</li>
								<li><span class="float-right badge bg-main">828</span><span class="icon-file"></span> 文件</li>
								<li><span class="float-right badge bg-main">828</span><span class="icon-shopping-cart"></span> 订单</li>
								<li><span class="float-right badge bg-main">828</span><span class="icon-file-text"></span> 内容</li>
								<li><span class="float-right badge bg-main">828</span><span class="icon-database"></span> 数据库</li>
							</ul>
						</div>
						<br>
					</div>
					<div class="xm9">
						<div class="alert alert-yellow"><span class="close"></span><strong>注意：</strong>您有5条未读信息，<a href="#">点击查看</a>。</div>
						<div class="alert">
							<h4>拼图前端框架介绍</h4>
							<p class="text-gray padding-top">拼图是优秀的响应式前端CSS框架，国内前端框架先驱及领导者，自动适应手机、平板、电脑等设备，让前端开发像游戏般快乐、简单、灵活、便捷。</p>
							<a target="_blank" class="button bg-dot icon-code" href="pintuer4.zip"> 下载示例代码</a>
							<a target="_blank" class="button bg-main icon-download" href="http://www.pintuer.com/download/pintuer.zip"> 下载拼图框架</a>
							<a target="_blank" class="button border-main icon-file" href="http://www.pintuer.com/"> 拼图使用教程</a>
						</div>
						<div class="panel">
							<div class="panel-head"><strong>系统信息</strong></div>
							<table class="table">
								<tbody>
									<tr>
										<th colspan="2">服务器信息</th>
										<th colspan="2">系统信息</th>
									</tr>
									<tr>
										<td width="110" align="right">操作系统：</td>
										<td>Windows 2008</td>
										<td width="90" align="right">系统开发：</td>
										<td><a href="http://www.pintuer.com" target="_blank">拼图前端框架</a></td>
									</tr>
									<tr>
										<td align="right">Web服务器：</td>
										<td>Apache</td>
										<td align="right">主页：</td>
										<td><a href="http://www.pintuer.com" target="_blank">http://www.pintuer.com</a></td>
									</tr>
									<tr>
										<td align="right">程序语言：</td>
										<td>PHP</td>
										<td align="right">演示：</td>
										<td><a href="http://www.pintuer.com/demo/" target="_blank">demo/</a></td>
									</tr>
									<tr>
										<td align="right">数据库：</td>
										<td>MySQL</td>
										<td align="right">群交流：</td>
										<td><a href="http://shang.qq.com/wpa/qunwpa?idkey=a08e4d729d15d32cec493212f7672a6a312c7e59884a959c47ae7a846c3fadc1" target="_blank">201916085</a> (点击加入)</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<p class="text-right text-gray">基于<a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图前端框架</a>构建</p>
				<div class="clearfix text-center">
					<a class="button button-big bg-main badge-corner" href="http://www.pintuer.com/demo/pintuer3/" target="_blank">拼图最美中文后台-后翘<span class="badge bg-red">会员</span></a>
					<br>
					<br>
					<a href="http://www.pintuer.com/demo/pintuer3/" target="_blank"><img src="images/index.jpg" class="img-responsive" alt="会员版-登录"></a>
					<br>
					<a href="http://www.pintuer.com/demo/pintuer3/login.html" target="_blank"><img src="images/login.jpg" class="img-responsive" alt="会员版-首页"></a>
				</div>
				<br>
			</div>
		</div>
		<!--底部-->
		<div class="layout fixed-bottom bg-white">
			<div class="border-bottom padding-bottom">
				<div class="text-center height-big text-small">
					<strong>版权所有 © <a href="http://www.pintuer.com">Pintuer.com</a> All Rights Reserved，图ICP备：<a href="http://www.pintuer.com">380959609</a></strong>
				</div>
			</div>
		</div>
		<div id="alert-talk" class="container-layout bg-white margin" style="display: none;">
			<div class="alert-yellow padding">
				<h4><strong>大火兔有话说</strong></h4>
				<p class="text-gray padding-top">这一款后台是拼图纯响应式后台，适合PC端及移动端。</p>
				<strong>为什么采用这种布局方式？</strong>
				<p class="text-gray padding-top">
					很多朋友看到此款后台的设计一定会很诧异，完全与传统经典布局不同，没有左侧导航，而且菜单也仅仅只有2个，导航也集中，使用起来不方便， 中间留空也很大。其实这样的布局适合大型系统，例如ERP，CRM等，推荐数据量大，表单较多的朋友使用。有时候客户的一张表可能要显示几十个字段，而经典的布局方式反而会让视觉上受限制。 出于各种因素考虑特采用这种布局方式，意在给客户留更多的操作空间。
				</p>
				<strong>关于配色？</strong>
				<p class="text-gray padding-top">
					由于大火兔是从程序做到管理/产品，对配色相对较弱，如果有朋友的色差感比较强可以联系我，以帮助我们将该款后台美化。
				</p>
			</div>
			<hr>
			<!-- 多说评论框 start -->
			<div class="ds-thread" data-thread-key="pintuer-demo-pintuer4" data-title="拼图响应式后台-发现精美-拼图前端框架" data-url="http://wwww.pintuer.com/demo/pintuer4/index.html">
			</div>
			<!-- 多说评论框 end -->
			<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
			<script type="text/javascript">
				var duoshuoQuery = {
					short_name: "pintuer"
				};
				(function() {
					var ds = document.createElement('script');
					ds.type = 'text/javascript';
					ds.async = true;
					ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
					ds.charset = 'UTF-8';
					(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
				})();
			</script>
			<!-- 多说公共JS代码 end -->
		</div>
		<div class="hidden">
			<script src="http://s4.cnzz.com/stat.php?id=5952475&web_id=5952475" language="JavaScript"></script>
			<script>
				var _hmt = _hmt || [];
				(function() {
					var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
					document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F637f0fe043ea4b7f59c05d4491e27667' type='text/javascript'%3E%3C/script%3E"));
				})();
			</script>
		</div>
		<script src="http://www.pintuer.com/js/jquery.js"></script>
		<script src="http://www.pintuer.com/js/pintuer.js"></script>
		<script src="http://www.pintuer.com/plugins/respond.js"></script>
		<script src="http://www.pintuer.com/plugins/layer/layer.js"></script>
		<script src="js/admin.js"></script>
		<script>
			$(function() {
				//大于移动端800宽度才弹出提示
				if ($(window).width() >= 800) {
					layer.open({
						type: 1,
						shade: false,
						title: false, //不显示标题
						area: ['420px', '640px'],
						content: $('#alert-talk'), //捕获的元素
						cancel: function(index) {
							layer.close(index);
						}
					});
				}
			});
		</script>
	</body>

</html>